<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<%
		String basePath = request.getScheme()
				+"://"
				+request.getServerName()
				+":"
				+request.getServerPort()
				+request.getContextPath()
				+"/";
	%>
	<base href="<%=basePath%>">
	<!--_meta 作为公共模版分离出去-->
	<%@ include file="common/web_meta.jsp"%>
	<!--/meta 作为公共模版分离出去-->


<title>新增菜品</title>
<link href="pc/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-container">
	<form class="form form-horizontal" id="form-article-add" action="pc/web_dish_management.jsp">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">
				<span class="c-red">*</span>菜品名称:
			</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text"  class="input-text" value="" placeholder="长度不超过30字符" id="name" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>菜品价格:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="0.00" id="price" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类栏目:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<span class="select-box">
				<select name="" class="select">
					<option value="0">分类_1</option>
					<option value="1">分类_2</option>
					<option value="11">├分类_3</option>
					<option value="12">├分类_4</option>
					<option value="13">├分类_5</option>
				</select>
				</span>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">是否优惠:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div class="mui-input-row mui-radio ">
					<label>是</label>
					<input name="radio_1" type="radio" checked>
					<label>否</label>
					<input name="radio_1" type="radio" checked>
				</div>
				<label>优惠价格:</label>
				<input type="text" name="" id="pPrice" value="" />
			</div>
		</div>
		<div class="row cl">

			<label class="form-label col-xs-4 col-sm-2">是否上架:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div class="mui-input-row mui-radio ">
					<label>是</label>
					<input name="radio_2" type="radio" checked>
					<label>否</label>
					<input name="radio_2" type="radio" checked>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">是否设置为推荐:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div class="mui-input-row mui-radio ">
					<label>是</label>
					<input name="radio_3" type="radio" checked>
					<label>否</label>
					<input name="radio_3" type="radio" checked>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">添加规格选项:</label>
				<div class="formControls col-xs-8 col-sm-9">
				<ul class="mui-table-view"style="border: gainsboro 1px solid;width: 10%;float: left;">
						<li class="mui-table-view-cell">
							<font size="" color="grey">属性</font>
						</li>
						<li class="mui-table-view-cell">
							<font size="" color="">辣度</font>
						</li>
						<li class="mui-table-view-cell">
							<font size="" color="">酱料</font>
						</li>
						<li class="mui-table-view-cell">
							<a href="#"title="添加属性">
								<font size="" color="">添加属性</font>
							</a>
							
						</li>
						<li class="mui-table-view-cell">
							
						</li>
					</ul>
						<table style="border: gainsboro 1px solid;width:60%;float: left;">
							<tr style="background-color: gainsboro">
								<th><font size="" color="grey">做法</font></th>
								<th><font size="" color="grey">加价类型</font></th>
								<th><font size="" color="grey">加价参数</font></th>
								<th><font size="" color="grey">编辑</font></th>
							</tr>
							<tr>
								<td>不加辣</td>
								<td>按量加价</td>
								<td>0.00</td>
								<td><button type="button" class=" btn-secondary radius">编辑</button></td>
							</tr>
							<tr>
								<td>微辣</td>
								<td>按量加价</td>
								<td>0.00</td>
								<td><button type="button" class=" btn-secondary radius">编辑</button></td>
							</tr>
							<tr>
								<td>中辣</td>
								<td>按量加价</td>
								<td>0.00</td>
								<td><button type="button" class=" btn-secondary">编辑</button></td>
							</tr>
							<tr>
								<td><a href="#">添加做法</a></td>
								<td><a href="#"></a></td>
								<td><a href="#"></a></td>
								<td><a href="#"></a></td>
							</tr>
						</table>
				</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">添加简介:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">图片上传:</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div class="uploader-list-container"> 
					<div class="queueList">
						<div id="dndArea" class="placeholder">
							<div id="filePicker-2"></div>
							<p>或将照片拖到这里，单次最多可选10张</p>
						</div>
					</div>
					<div class="statusBar" style="display:none;">
						<div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
						<div class="info"></div>
						<div class="btns">
							<div id="filePicker2"></div>
							<div class="uploadBtn">开始上传</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<%--<button onClick="article_save();" class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 发布菜品</button>--%>
				<button id="sub_btn" class="btn btn-secondary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 发布菜品</button>
				<%--<input id="sub_btn" class="btn btn-secondary radius" type="submit" value="&nbsp;&nbsp;发布菜品&nbsp;&nbsp;">--%>
				<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消发布&nbsp;&nbsp;</button>
				<%--新增了错误信息显示--%>
				<span class="errorMsg" style="color: red"></span>
			</div>
		</div>
	</form>
</div>
</div>

<!--_footer 作为公共模版分离出去-->

<%@ include file="common/web_footer.jsp"%>
<script type="text/javascript" src="pc/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="pc/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="pc/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="pc/lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript">

(function( $ ){
    // 当domReady的时候开始初始化
    $(function() {
        var $wrap = $('.uploader-list-container'),

            // 图片容器
            $queue = $( '<ul class="filelist"></ul>' )
                .appendTo( $wrap.find( '.queueList' ) ),

            // 状态栏，包括进度和控制按钮
            $statusBar = $wrap.find( '.statusBar' ),

            // 文件总体选择信息。
            $info = $statusBar.find( '.info' ),

            // 上传按钮
            $upload = $wrap.find( '.uploadBtn' ),

            // 没选择文件之前的内容。
            $placeHolder = $wrap.find( '.placeholder' ),

            $progress = $statusBar.find( '.progress' ).hide(),

            // 添加的文件数量
            fileCount = 0,

            // 添加的文件总大小
            fileSize = 0,

            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 110 * ratio,
            thumbnailHeight = 110 * ratio,

            // 可能有pedding, ready, uploading, confirm, done.
            state = 'pedding',

            // 所有文件的进度信息，key为file id
            percentages = {},
            // 判断浏览器是否支持图片的base64
            isSupportBase64 = ( function() {
                var data = new Image();
                var support = true;
                data.onload = data.onerror = function() {
                    if( this.width != 1 || this.height != 1 ) {
                        support = false;
                    }
                }
                data.src = "";
                return support;
            } )(),
            // WebUploader实例
            uploader;
        // 实例化
        var uploader2 = WebUploader.create({
            pick: {
                id: '#filePicker-2',
                label: '点击选择图片'
            },
            formData: {
                uid: 123
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: 'lib/webuploader/0.1.5/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server: 'http://lib.h-ui.net/webuploader/0.1.5/server/fileupload.php',
            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300,
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
        });
        // 添加“添加文件”的按钮，
        uploader2.addButton({
            id: '#filePicker2',
            label: '继续添加'
        });

        $upload.addClass( 'state-' + state );
      /*  updateTotalProgress();*/


        //新增了提交按钮的单击事件，用来验证表单信息是否合法
        $("#sub_btn").click(function () {
			//验证菜品名称 不超过30字符
			//1 获取输入框内容
			var nameText = $("#name").val();
			//2 创建正则表达式对象
			var namePatt = /^.{1,30}$/;
			//3 使用test方法验证
			if(!namePatt.test(nameText)){
				//4 提示用户结果
				$("span.errorMsg").text("菜品名称不合法");
				return false;
			}
			//验证金额
			//  /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ 小数点后最多两位
			var priceText = $("#price").val();
			var pricePatt = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
			if(!pricePatt.test(priceText)){
				$("span.errorMsg").text("价格输入不合法");
				return false;
			}
			$("span.errorMsg").text("");
		});
    });

})( jQuery );
</script>
</body>
</html>